<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .sky {
            color: red;
            padding: 15px 0;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="sky1">
            {{firstName}}
        </div>
        <div class="sky2">
            {{lastName}}
        </div>
        <div class="sky3">
            {{res_name}}
        </div>
    </div>
    <script type="text/javascript" src="../../../../commonJS/vue.js"></script>
    <script type="text/javascript" src="../../../../commonJS/zepto-1.2.0.js"></script>
    <!-- <script type="text/javascript" src="../../../../commonJS/moment.js"></script> -->
    <!-- <script type="text/javascript" src="../../../../commonJS/common.js"></script> -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                firstName: "sky",
                lastName: "moon",
            },
            computed: {
                //
                res_name: {
                    // 当执行 app.fullName =’John Doe＇；时， setter 就会被调用，数据 firstName lastName 都会相对
                    // 更新，视图同样也会更新。
                    get: function() {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // 【本质】是为了反向监听
                    // 当执行 app.fullName ="John Doe"时，setter 就会被调用，数据 firstName lastName 都会相对
                    // 更新，视图同样也会更新。
                    set: function(newValue) {
                        debugger
                        // app.res_name = "jinling love";
                        console.log(newValue);
                        var names = newValue.split(' ');
                        console.log(names);
                        this.firstName = names[0] + "mao";
                        this.lastName = names[names.length - 1] + "mao";
                    }
                }
            }
        })
    </script>
</body>